<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡实例</title>

	<script type="text/javascript">
		LAM.main=function(){
			'use strict';
			var System = this;
			System.use();
			System.Loadcommon
					.load({
						'baseUrl':System._ROOT_,
						'suffix':'.css',
						'rel':'stylesheet',
						'css':[
							'/common/css/lib/bootstrap'
							,'/demo/css/style'
						]
					})
					.print();
			System.import([
				'/Tab.class'
			],System.classPath);

		};





</script>





<style type="text/css">
	.list li{color:#333;width:100px;}
	.list .cur{color:red;}
	.hide{display:none;}
</style>
</head>

<body class="container-fluid">
<div class="row">
	<div class="col-md-4">
		<ul class="list-group" data-tab="select">
			<li class="list-group-item" data-id="sentence_detail">sentence_detail</li>
			<li class="list-group-item" data-id="drag">drag</li>
			<li class="list-group-item" data-id="dropdown">dropdown</li>
			<li class="list-group-item" data-id="popLayer">popLayer</li>
		</ul>
	</div>
	<div class="col-md-8">
		<div class="block" data-tab="section" data-id="sentence_detail">
			<#include file="{{LAM.VIEWS}}/demo/sentence_detail.html" dataType="html" />
		</div>

		<div class="block none" data-tab="section" data-id="drag">
			<#include file="{{LAM.VIEWS}}/demo/drag.html" dataType="html" />
		</div>
		<div class="block none" data-tab="section" data-id="dropdown">
			<#include file="{{LAM.VIEWS}}/demo/dropdown.html" dataType="html" />
		</div>
		<div class="block none" data-tab="section" data-id="popLayer">
			<#include file="{{LAM.VIEWS}}/demo/popLayer.html" dataType="html" />
		</div>
	</div>
</div>



</body>
<script type="text/javascript">

	LAMJS.run(function(){
		'use strict';
		var System = this;

		$(function(){
			System.Html.analysisTpl();
			$(document).on('click', '[data-tab="select"] li', function () {
				System.Tab.tab.call(this);

			});
		});
	});

</script>
</html>

